<template>
  <div>
    <h1>App</h1>
    <hr />
    <!-- 点击修改浏览器地址栏的路径或hash值,从而让路由组件切换 -->
    <router-link to="/home" active-class="done">home</router-link> <br />
    <!-- 默认是添加历史记录,增加了replace属性,则改为替换历史记录 -->
    <router-link to="/about" active-class="done" replace>about</router-link>
    <br />
    <!-- router-view决定了路由组件渲染的位置 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

<style>
.router-link-active {
  color: skyblue;
}

.done {
  background-color: green;
}
</style>
